<template>
  <div class="login-box">
    <div class="login-top">
      <img src="@assets/images/logo.png" />
      <div class="name">数字化云工厂</div>
    </div>
    <div class="login-con">
      <div class="login-left">
        <div class="txt1">欢迎使用数字化云工厂</div>
        <div class="txt2">聚焦智慧建造、提供一体化价值增益服务</div>
      </div>
      <div class="login-right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="账号登录" name="account" class="login-form">
            <el-form ref="form" :model="form" @keydown.enter.native="onSubmit">
              <el-form-item label="">
                <div class="login-txt" :class="{focusName: isFocusName}" @click="nameHandle">用户名</div>
                <el-input v-model.trim="form.name" class="login-user" :class="{errInp: msg}" placeholder="" @focus="focusNameHandle(true)" @blur="focusNameHandle(false)"></el-input>
              </el-form-item>
              <el-form-item label="">
                <div class="login-txt" :class="{focusName: isFocusPwd}" @click="pwdHandle">密码</div>
                <el-input v-model.trim="form.pwd" class="login-pwd" :class="{errInp: msg}" placeholder="" :type="pwdHide?'password':'text'" @focus="focusPwdHandle(true)" @blur="focusPwdHandle(false)">
                  <template #suffix>
                    <img v-if="pwdHide" src="@assets/images/eye-hide.png" @click="pwdHide = false" width="28" height="22" style="margin-top: 29px; cursor: pointer" />
                    <img v-else src="@assets/images/eye-show.png" @click="pwdHide = true" width="28" height="22" style="margin-top: 29px; cursor: pointer" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="">
                <div class="login-txt" :class="{focusName: isFocusCode}" @click="codeHandle">验证码</div>
                <el-input class="code" :class="{errInp: codeMsg}" v-model.trim="form.code" placeholder="" @focus="focusCodeHandle(true)" @blur="focusCodeHandle(false)"></el-input>
                <div class="code-identify"  @click="refreshCode">
                  <identify :identifyCode="identifyCode"></identify>
                </div>
              </el-form-item>
              <div class="tips" v-if="msg">
                <CircleClose class="err-icon" />
                {{msg}}
              </div>
              <div class="tips" v-if="codeMsg">
                <CircleClose class="err-icon" />
                {{codeMsg}}
              </div>
              <el-form-item>
                <el-button type="primary" class="login-btn" @click="onSubmit">登录
                  <el-icon class="is-loading" v-if="isLoading">
                    <Loading />
                  </el-icon>
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="扫码登录" name="code">
            xxxxx
          </el-tab-pane>
        </el-tabs>
        <div class="login-type">
          <div class="type-btns">
            <div>其它登录方式</div>
            <img @click="activeName = 'code'" src="@assets/images/wx-icon.png" />
            <img @click="activeName = 'code'" src="@assets/images/qywx-icon.png" />
          </div>
          <div style="cursor: pointer">忘记密码？</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLoginCheck } from '@/api/api.js'
import Identify from "@/components/identify";
export default {
  name: "login",
  components: {Identify},
  data() {
    return {
      activeName: 'account',
      pwdHide: true,
      year: new Date().getFullYear(),
      isFocusName: false,
      isFocusPwd: false,
      isFocusCode: false,
      form: {
        name: '',
        pwd: '',
        code: ''
      },
      msg: '',
      codeMsg:'',
      isLoading: false,
      identifyCodes: "1234567890",
      identifyCode: ''
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    focusNameHandle(is){
      if(!this.form.name.trim()){
        this.isFocusName = is;
      }
      this.msg = '';
      this.codeMsg = '';
    },
    focusPwdHandle(is){
      if(!this.form.pwd.trim()){
        this.isFocusPwd = is;
      }
      this.msg = '';
      this.codeMsg = '';
    },
    focusCodeHandle(is){
      if(!this.form.code.trim()){
        this.isFocusCode = is;
      }
      this.msg = '';
      this.codeMsg = '';
    },
    nameHandle(){
      document.querySelector('.login-user input').focus();
    },
    pwdHandle(){
      document.querySelector('.login-pwd input').focus();
    },
    codeHandle(){
      document.querySelector('.code input').focus();
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ];
      }
      // console.log(this.identifyCode);
    },
    async onSubmit(){
      let { name, pwd , code} = this.form;
      if(!name || !pwd){
        this.msg = '请输入账号密码';
        return;
      }
      if(!code){
        this.codeMsg = '请输入验证码';
        return;
      }
      if(code != this.identifyCode){
        this.codeMsg = '验证码输入错误';
        return;
      }

      this.isLoading = true;
      setTimeout(() => {
        /*let res = await userLoginCheck({
          "loginCode": name,
          "password": pwd
          /!*"loginCode":"18871171759",
            "password":"sneb1234"*!/
        });
        this.isLoading = false;
        if(res.data.resultCode != 200){
          this.msg = res.data.resultMessage;
          return;
        }
        localStorage.setItem('userInfo',JSON.stringify(res.data.resultData));*/
        localStorage.setItem('userInfo',JSON.stringify({name,pwd}));
        this.$router.push('/');
      },1000)
    }
  }
}
</script>

<style scoped lang="scss">
.login-box{
  min-width: 980px;
  background: url("@assets/images/login-bg.png") no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;

  .login-top{
    display: flex;
    align-items: center;
    height: 85px;
    padding-left: 32px;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0px 3px 10px 0px rgba(24, 24, 24, 0.1);

    .name{
      color: #141E36;
      font-size: 24px;
      font-weight: bold;
      padding-left: 10px;
      letter-spacing: 2px;
    }
  }
  .login-con{
    width: 1500px;
    overflow: hidden;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -289px;
    margin-left: -750px;

    .login-left{
      float: left;
      margin-top: 150px;
      img{
        width: 132px;
        height: 132px;
        border: 2px solid #FFFFFF;
        border-radius: 2px;
        box-shadow: 0px 10px 50px 0px #D9DEE8;
        background-color: #fff;
      }
      .txt1{
        color: #2A6BFF;
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 30px;
        letter-spacing: 4px;
      }
      .txt2{
        color: #6B7EA7;
        font-size: 24px;
        margin-bottom: 30px;
        letter-spacing: 4px;
      }
      .txt3{
        color: #6B7EA7;
        font-size: 18px;
        letter-spacing: 5px;
      }
    }
    .login-right{
      float: right;
      width: 427px;
      height: 615px;
      background: #fff;
      border-radius: 10px;
      padding: 50px 70px 0;

      ::v-deep(.el-tabs__nav-scroll) {
        text-align: center;
      }
      ::v-deep(.el-tabs__nav){
        float: inherit;
      }
      ::v-deep(.el-tabs__item){
        font-size: 24px;
        color: #C4CEE5;
        padding: 0 50px;
        font-weight: 400;

        &:nth-child(2):before{
          content: '|';
          position: absolute;
          right: 0;
          top: 0;
          color: #C4CEE5;
          font-size: 20px;
          font-weight: 100;
        }
      }
      ::v-deep(.el-tabs__nav-wrap), ::v-deep(.el-tabs__nav-scroll){
        overflow: inherit;
      }
      ::v-deep(.el-tabs__item.is-active){
        color: #2A6BFF;
        font-weight: bold;
        text-shadow: 0px 4px 16px #D2DFFC;
      }
      ::v-deep(.el-tabs__nav-wrap::after){
        background-color: inherit;
      }
      ::v-deep(.el-tabs__active-bar){
        display: none;
      }

      .login-form{
        margin-top:30px;

        ::v-deep(.el-input__inner){
          width: 420px;
          height: 70px;
          font-size: 18px;
          margin: 0 auto;
          border-radius: 10px;
          background: #F0F6FF;
          color: #222;
          font-weight: bold;
          letter-spacing: 0.5px;
          padding-top: 20px;
          padding-left: 27px;
        }
        ::v-deep(.el-input__inner:focus){
          border:1px solid #2A6BFF !important;
          box-shadow: 0 0 5px #2A6BFF;
          background-color: #fff;
        }
        .errInp{
          ::v-deep(.el-input__inner){
            border: 1px solid #CC5050 !important;
            box-shadow: 0 0 5px #CC5050;
            background-color: #fff;
          }
        }
        ::v-deep(.el-input__icon){
          font-size: 22px;
          cursor: pointer;
          color: #C4CEE5;
        }
        ::v-deep(.el-form-item--default){
          margin-bottom: 28px;
        }
        ::v-deep(.el-form-item__content){
          position: relative;
        }
        .tips{
          position: absolute;
          bottom: 130px;
          left: 30px;
          color: #CC5050;

          .err-icon{
            width: 14px;
            height: 14px;
            vertical-align: middle;
          }
        }
        .login-txt{
          position: absolute;
          z-index: 2;
          padding-left: 29px;
          font-size: 18px;
          color: #C4CEE5;
          user-select: none;
        }
        .code{
          width: 292px;
          margin: 0 auto;
        }
        .code-img{
          float: right;
          width: 120px;
          height: 77px;
          margin-left: 8px;
          margin-right: 2px;
        }
        .code-identify{
          width: 120px;
          height: 68px;
        }
        .login-btn{
          width: 390px;
          height: 58px;
          margin: 30px auto;
          color: #fff;
          font-size: 24px;
          border-radius: 29px;
          box-shadow: 0px 5px 23px 0px #95A2C0;
          background-image: linear-gradient(#4184FF,#2A6BFF,#3173FF);
        }
        .login-btn:hover{
          opacity: 0.8;
        }

        .focusName{
          top: 6px;
          font-size: 14px;
          color: #2A6BFF;
          animation: aniTxt 0.3s linear;
        }
        @keyframes aniTxt {
          0% {
            top: 20px;
            font-size: 18px;
            color: #c5c9d0;
          }
          100% {
            top: 6px;
            font-size: 14px;
            color: #2A6BFF;
          }
        }

      }
      .login-code{
        text-align: center;
        margin: 0 auto 28px;

        .code-txt{
          font-weight: 400;
          color: #2A6BFF;
          text-shadow: 0px 4px 16px #D2DFFC;
          font-size: 16px;
          margin: 35px 0;
        }
        img{
          border: 2px solid #FFFFFF;
          box-shadow: 0px 10px 30px 0px #D9DEE8;
        }
      }
      .login-type{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #2A6BFF;
        .type-btns{
          display: flex;
          align-items: center;
          color: #C4CEE5;
          img{
            margin-left: 15px;
            cursor: pointer;
          }
        }
      }

    }

  }
  .copy-right{
    text-align: center;
    font-size: 14px;
    color: #9EAFD4;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -210px;
  }
}
</style>